import React from 'react'
import Header from "../../component/header/header"
import Footer from '../../component/footer/footer'
import ExchangeList from '../../component/exchangeList/exchangeList'
import './style.less'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { saveUsdt } from '@/store/action'
import { Modal } from 'antd-mobile'
import API from '@/api/api'

class Exchange extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            exchange: [
                { name: "USDT", cname: "币币区" },
            ],
            areaType: 'USDT',
            coinTitle:'',
            modal: false,
        }
    }
    static propTypes = {
        usdtInfo: PropTypes.object,
        saveUsdt: PropTypes.func,
    }
    showModal = key => (e) => {
        e.preventDefault()
    }
    showModal = key => (e) => {
        e.preventDefault(); // 修复 Android 上点击穿透
        this.setState({
            [key]: true,
        });
    }
    onClose = key => () => {
        this.setState({
            [key]: false,
        });
    }
    handleChange = (event) => {
        this.setState({
            coinTitle:event.target.value
        })
        console.log(this.state.coinTitle)
    }
    //tabs
    setType(str) {
        this.setState({
            areaType: str,
        })
    }

    componentDidMount() {
        this.props.saveUsdt();
    }
    render() {
        const rightInput =
            <div>
                <div className="right-title">
                    <input value={this.state.coinTitle} onChange={this.handleChange} className="ex-input" type="text" />
                    <img src="../../static/search.png" mode=""></img>
                </div>
            </div>
        return (
            <div className="exchange">
                <Header title="行情" leftContent="logo" rightContent={rightInput}></Header>
                <div className="content">
                    <div className="exchange">
                        <div className="exchange-header">
                            <div className="b-list" onClick={this.setType.bind(this, 'autoArea')} className={`b-list ${this.state.areaType == 'autoArea' ? 'active' : ''}`}>自选区</div>
                            {this.state.exchange.map((item, index) => {
                                return (
                                    <div className="b-list" onClick={this.setType.bind(this, item.name)} className={`b-list ${this.state.areaType == item.name ? 'active' : ''}`} key={index}>{item.cname}</div>
                                )
                            })}
                        </div>
                        <div className="coin-list">
                            <span>USDT</span>
                        </div>
                         <div className={this.state.areaType==='USDT'?'':'hidden'}> 
                        <ExchangeList title={this.state.coinTitle}></ExchangeList>
                        </div>  
                        <div className={`self ${this.state.areaType == 'autoArea' ? '' : 'hidden'}`} onClick={this.showModal('modal')}>+添加自选</div>
                        {/* <Modal
                            visible={this.state.modal}
                            transparent
                            maskClosable={true}
                            onClose={this.onClose('modal')}
                            title="Title"

                        >
                            <div>
                                <div className="top">
                                    <div className="left">
                                        <input type="span" value="" placeholder="搜索" />
                                    </div>
                                    <span onClick="search = false">确认</span>
                                </div>
                                <div className="list">
                                    <div className="title">币币</div>
                                    <div className="block"
                                        onClick="startSymbol(item.symbol)">
                                        <span>242</span>
                                    </div>
                                </div>
                            </div>
                        </Modal> */}

                    </div >
                </div>
                <Footer></Footer>

            </div >
        )
    }
}
//需要渲染什么数据
const mapStateToProps = (state, ownProps) => {
    return {
        usdtInfo: state.usdtInfo
    }
}
//需要触发什么行为
const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        saveUsdt: (usdtInfo) => {
            dispatch(saveUsdt(usdtInfo))
        }
    }
}
//连接组件
export default connect(mapStateToProps, mapDispatchToProps)(Exchange)